<template>
  <up-popup
    :show="pswShow"
    v-if="pswShow"
    :round="20"
    mode="bottom"
    @close="pswShow = false"
  >
    <view class="passwordIpt">
      <image
        class="goBack"
        @click="pswShow = false"
        src="@/static/image/51.png"
        mode=""
      ></image>
      <view class="itemTitle">
        <view>{{ tips }}</view>
        <view>{{ title }}</view>
        <view v-if="money"
          >$ <text>{{ money }}</text></view
        >
        <view v-if="money">
          <view>支付方式</view>
          <view>余额</view>
        </view>
      </view>
      <view class="pswFin">
        <up-code-input
          v-model="password"
          @finish="finishFn"
          size="45"
          :maxlength="6"
          mode="box"
          dot
        ></up-code-input>
      </view>
      <up-keyboard
        mode="number"
        @change="valChange"
        disabledKeyboard
        @backspace="backspace"
        :dotDisabled="true"
        :overlay="false"
        :tooltip="false"
        :show="show"
      ></up-keyboard>
    </view>
  </up-popup>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from "vue";
const instance = getCurrentInstance()?.appContext.config.globalProperties;
const props = defineProps({
  tips: {
    type: String,
    default: "请输入支付密码",
  },
  title: {
    type: String,
    default: "",
  },
  money: {
    type: [Number, String],
    default: 0,
  },
});

const emit = defineEmits();
const password = ref<string>("");
const pswShow = ref<boolean>(false);
const show = ref<boolean>(true);

const finishFn = () => {
  emit("pswFinish", instance?.getRsaCode(password.value));
  password.value = "";
  pswShow.value = false;
};

const valChange = (val: string) => {
  if (password.value.length >= 6) {
    return;
  }
  password.value += val;
  if (password.value.length === 6) {
    finishFn();
  }
};

const backspace = () => {
  if (password.value.length <= 0) {
    return;
  }
  password.value = password.value.slice(0, -1);
};
const openPsw = () => {
  pswShow.value = true;
};
defineExpose({
  openPsw,
});
</script>

<style lang="scss" scoped></style>
